
import React from 'react';
import './sidermenu.styl';
import {Menu,Spin} from 'antd';

import * as Icon from '@ant-design/icons';
import './sidermenu.styl';
import {withRouter} from 'react-router-dom';

import {getMenuList} from '@/data/menu';
import {getMenuComponentAndName} from '@/utils/helpers';


const { SubMenu } = Menu;
class SiderMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isInit:false,
            selectedKeys:'',
            openKeys:'',
            openKeysIsOpen:false,
            menuList:[]
        }
    }
    /**
     * 
     * @param {*} props 
     */
    componentWillReceiveProps(props) {
        console.log(props.component);
        let component = props.component;
        this.setMenu(component);
    }
    setMenu(component) {
        const {mainMenu,subMenu} = getMenuComponentAndName(component);
        if(mainMenu && subMenu) {
            //主菜单和子菜单都存在
            this.state.openKeysIsOpen = true;
            this.setState({openKeys:mainMenu,selectedKeys:subMenu});
        } else if(mainMenu) {
            //子菜单不存在，selectedKeys是menuMain
            this.state.openKeysIsOpen = false;
            this.setState({selectedKeys:mainMenu});
        } else {
            this.state.openKeysIsOpen = false;
            this.setState({openKeys:'',selectedKeys:''});
        }
    }
    /**
     * 组件挂载完成时
     */
    componentDidMount() {
        //请求菜单数据
        setTimeout(()=>{
            let list = getMenuList();
            sessionStorage.setItem('menuList',JSON.stringify(list));
            this.state.menuList = list;
            let component = this.props.match.params.id;
            this.setState({menuList:list,isInit:true});
            //挂载的时候如果存在路由
            if(component) {
                this.setMenu(component);
            }
        },500)
    }
    /**
     * 选择子菜单时（antd提供的事件）
     * @param {*} e 
     */
    selectMenu(e) {
        this.props.history.push('/admin/'+e.key);
    }
    /**
     * 点击有子菜单的主菜单时
     */
    clickMenuHasSubmenu(e) {
        let component = e.key;
        const {mainMenu} = getMenuComponentAndName(component);
        //如果点击的是同一个主菜单
        if(this.state.openKeys === component) {
            //展开/收缩
            this.setState({openKeys:this.state.openKeysIsOpen?'':mainMenu});
            this.state.openKeysIsOpen = !this.state.openKeysIsOpen;
            return
        }
        //设置展开菜单
        this.setState({openKeys:mainMenu});
        this.state.openKeysIsOpen = true;
        
    }
    /**
     * 点击没有子菜单的主菜单时
     * @param {*} e 
     */
    clickMenuNoSubMenu(e) {
        let component = e.key;
        const {mainMenu} = getMenuComponentAndName(component);
        this.setState({selectedKeys:mainMenu});
    }
    renderMenu(data) {
        return data.map((item) => {
            if(item.children && item.children.length > 0) {
                return (
                    <SubMenu
                        onTitleClick={this.clickMenuHasSubmenu.bind(this)}
                        key={item.component?item.component:item.id}
                        icon={item.icon?React.createElement(Icon[item.icon]):''}
                        title={item.name}
                    >
                        {this.renderMenu(item.children)}
                    </SubMenu >
                )
            } else {
                return (
                <Menu.Item
                    onClick={this.clickMenuNoSubMenu.bind(this)}
                    key={item.component?item.component:item.id} 
                    icon={item.icon?React.createElement(Icon[item.icon]):''}
                >
                {item.name}
                </Menu.Item >);
            }
        });
    }
    render() {
        if(!this.state.isInit) {
            return (
                <div className="sider sidermenu-spin-container">
                    <Spin tip="菜单加载中..."/>
                </div>
            );
        }
        return (
            <div className="sider">
                <Menu 
                    mode="inline"
                    selectedKeys={[this.state.selectedKeys]}
                    openKeys={[this.state.openKeys]}
                    onSelect={this.selectMenu.bind(this)}
                >
                    {this.renderMenu(this.state.menuList)}
                </Menu>
            </div>
        );
    }
}

export default withRouter(SiderMenu);